<template>
  <el-dialog :title="title" v-model="isShow">
    <el-table
      :data="dataList"
      height="400"
      :header-cell-style="{ background: '#F5F5F5', 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      @row-click="rowClick"
    >
      <template v-if="!listType">
        <XMTableColumn :label="label" prop="orgName"></XMTableColumn>
      </template>
      <template v-else>
        <XMTableColumn label="患者姓名" prop="name"></XMTableColumn>
        <XMTableColumn label="身份证号" prop="cardNo"></XMTableColumn>
        <XMTableColumn label="生日" prop="birthday"></XMTableColumn>
        <XMTableColumn label="诊疗卡号" prop="diagnosisNo"></XMTableColumn>
        <XMTableColumn label="手机号" prop="phone"></XMTableColumn>
      </template>
    </el-table>
  </el-dialog>
</template>
<script>
  import { computed } from '@vue/runtime-core'
  export default {
    name: 'NodeTable',
    emits: ['nodeChage', 'update:modelValue'],
    props: {
      title: String,
      modelValue: Boolean,
      list: Array,
      label: {
        type: String,
        default() {
          return '列表名称'
        },
      },
      listType: {
        type: String,
        default() {
          return null
        },
      },
    },
    setup(props, context) {
      let isShow = computed({
        get() {
          return props.modelValue
        },
        set(val) {
          context.emit('update:modelValue', val)
        },
      })

      let rowClick = function (val) {
        context.emit('nodeChage', val)
      }
      let dataList = computed(() => {
        return props.list
      })
      return {
        isShow,
        rowClick,
        dataList,
      }
    },
  }
</script>
<style lang="scss" scoped>
  .el-table--fit {
    margin-top: -20px;
  }
</style>
